<extend name="Base/common"/>
<block name="style">
    <link href="__CSS__/font-icon.css" rel="stylesheet" >
    <style>
		body {
			background: #F7F7F7;
		}
		.ot_updown {
			float: right;
			margin: 10px 0;
		}
		.topic_title_count {
            padding-top: 20px;
        }
        .pull-right {
            float: right !important;
        }
        .topic_title_count p {
            font-size: 16px;
            margin-top: 16px;
            margin-right: 10px;
        }
        .topic_title p {
font-size: 18px;
}
		@media (max-width: 768px) {
			.ot_updown {
				margin: 15px auto;
				float: none;
				width: 160px;
				display: block;
			}
		}
		.ot_updown a {
			height: 35px;
			background-color: #eee;
			text-align: center;
			font-weight: bold;
			color: #98A3AE;
		}
		.ot_updown a:hover {
			background-color: #5B81A7;
			color: #F8FAFB;
		}
		.post-detail > div {
			/* border-bottom:1px dashed #ddd; */
		}
		.post-detail > div {
			padding: 15px 25px;
		}

		.post-detail .pagination {
			margin: 0;
		}
		.post_text p {
			font-size: 16px;
			line-height: 1.65;
		}
		.post_text {
			background: #fff;
			padding: 20px;
			min-height: 450px;
			overflow: hidden;
			position: relative;
			font-size: 16px;
		}
		.side-block {
			margin-bottom: 30px;
		}
		.board_info {
			font-size: 16px;
		}
		.side-block > div {
			background: #fff;
			margin-bottom: 25px;
			color: #626770;
			border-top: 5px solid #DDDDDD;
		}
		.side-block > div.first-child {
			border-top: 5px solid #DDDDDD;
		}
		.side-block > div.last-child {
			margin-bottom: 0;
		}
		#sidebar h5 {
			position: fixed;
			top: 190px;
		}
		#sidebar .popover {
			z-index: 9;
		}
		.side-block > div > h4 {
			margin: 0;
			border-bottom: 2px solid #F7F7F7;
			height: 46px;
			line-height: 46px;
			font-weight: normal;
			padding-left: 20px;
		}
		.board_filter ul, .board_classify ul, .hot_discuss ul, .active_user ul {
			margin: 0 auto;
			padding: 10px 20px 0;
		}
		.list-circle-prefix {
			display: inline-block;
			border-radius: 5px;
			width: 5px;
			height: 5px;
			background: #CCC;
			vertical-align: top;
			margin-right: 8px;
			margin-top: 9px;
		}
		.board_classify ul li {
			border-bottom: 1px dashed #e9e9e9;
			padding: 10px 0;
		}
		.active_user ul li {
			padding-top: 10px;
		}

		.ot_share {
			background: none repeat scroll 0 0 #FFFFFF;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
			margin-top: 10px;
			width: 50px;
			position: fixed;
			top: 187px;
			left: 0;
		}
		.ot_share li {
			text-align: center;
			padding: 10px;
		}
		.ot_share li a:hover {
			text-decoration: none;
		}
		.ot_share li span, .ot_share_s li span {
			font-size: 25px;
		}
		.ot_share_s a:hover {
			background: #DDDDDD !important;
			color: #000 !important;
		}
		.ot_share_s a:hover span {
			color: #fff;
		}
		.ot_share_s a {
			padding-left: 10px !important;
		}
		.ot_share_s ul span {
			display: inline-block;
			width: 26px;
			height: 26px;
			text-align: center;
			margin-right: 10px;
			z-index: 999;
		}
		.list-group {
			padding-left: 0;
			margin-bottom: 20px;
			list-style: none;
		}
		.list-group .list-group-item {
			border: none;
		}
		
		.board_classify p {
			margin: 10px 0px 0px 15px;
		}
		.board_classify p a {
			margin: 0 6px 6px 0;
			display: inline-block;
		}
		.board_classify a {
			line-height: 22px;
		}
		.board_classify a:hover {
			text-decoration: underline;
		}
		.board_classify span {
			color: #626770;
			font-size: 14px;
		}
		.side-block > div > div.last-child {
			padding-bottom: 20px;
		}
		
		.main-block {
			margin-bottom: 30px;
		}
		.main-block > div {
			background: #fff;
			padding: 15px 30px;
		}
		.main-block > .first-child {
			border-top: 5px solid #9EA9BE;
		}
		
		.breadcrumb{
		    margin-bottom: 0px;
		    padding-left:0;
		    font-size: 18px;
		}
    </style>
</block>
<block name="header">
    <div class="content_content container">
        <header class="row topic_title" id="overview">
            <div class="col-md-8 col-sm-8">
                <ol class="breadcrumb">
                    <li>
                        <a href="{:U('Index/index')}">首页</a>
                    </li>
                    <li>
                        <a href="{:U('Article/lists/',array('category'=>$category['id']))}">{$category['title']}</a>
                    </li>
                    <li class="active">
                        {$info.title}
                    </li>
                </ol>
                <p class="category_description">
                    {$info['description']}
                </p>
            </div>
            <div class="col-md-4 col-xs-12 col-sm-4 pull-right topic_title_count">
                    <a type="button" href="#" class="btn ot-btn-danger btn-lg pull-right" data-toggle="modal" data-target="#baoming-modal">
                        <span class="glyphicon glyphicon-edit"></span> 提交咨询意向
                    </a>
                    <p class="pull-right">
                    <i class="glyphicon glyphicon-eye-open"></i>&nbsp;{$info.view}&nbsp;&nbsp;<i class="glyphicon glyphicon-comment"></i>&nbsp;{$info.comment}
                    </p>
            </div>
        </header>
    </div>
</block>

<block name="body">
    <div class="content_content container">
        <div class="row row-offcanvas row-offcanvas-right">
            <div class="col-xs-12 col-sm-8 col-md-8 post-detail main-block">
                <section id="contents" class="clearfix post_text first-child">
                    {$info.content}
                </section>
                <div class="col-xs-6 col-md-4 col-md-offset-3" style="margin-top: 20px; margin-bottom: 20px;">
                    <a href="#" class="btn btn-primary btn-block" data-toggle="modal" data-target="#baoming-modal">意向咨询</a>
                </div>
            </div>

            <div class="col-md-4 col-xs-12 col-sm-4 sidebar-offcanvas side-block" id="sidebar" role="navigation">
                <div class="board_info first-child">
                    <h4>{$category['title']}</h4>
                    <if condition="$board">
                        <div class="board_classify first-child last-child">
                            <ul class="list-unstyled">
                                <volist name="board" id="bo">
                                    <li>
                                        <if condition="$bo['doc']">
                                            <span class="list-circle-prefix"></span><a href="{:U('Article/detail/',array('id'=>$bo['id']))}">{$bo['title']}</a>
                                            <else/>
                                            <span class="list-circle-prefix"></span><a href="{:U('Article/lists/',array('category'=>$bo['id']))}">{$bo['title']}</a>
                                        </if>
                                    </li>
                                </volist>
                            </ul>
                        </div>
                    </if>
                </div>

                <div class="ot_share last-child">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="http://s.jiathis.com/?webid=tsina&amp;url=http://www.iic.cn{:U('Article/detail/',array('id'=>$info['id']))}&amp;title={:urlencode($info['title'])}&amp;uid=1523327" target="_blank"> <span class="icon-sina-weibo" data-toggle="tooltip" data-placement="top" data-original-title="分享到新浪微博"></span> </a>
                        </li>
                        <li class="list-group-item">
                            <a href="http://s.jiathis.com/?webid=qzone&amp;url=http://www.iic.cn{:U('Article/detail/',array('id'=>$info['id']))}&amp;title={:urlencode($info['title'])}&amp;uid=1523327" target="_blank"> <span class="icon-qq" data-toggle="tooltip" data-placement="top" data-original-title="分享到QQ空间"></span> </a>
                        </li>
                        <li class="list-group-item">
                            <a href="http://s.jiathis.com/?webid=tqq&amp;url=http://www.iic.cn{:U('Article/detail/',array('id'=>$info['id']))}&amp;title={:urlencode($info['title'])}&amp;uid=1523327" target="_blank"> <span class="icon-tencent-weibo" data-toggle="tooltip" data-placement="top" data-original-title="分享到腾讯微博"></span> </a>
                        </li>
                        <li class="">
                            <a href="http://s.jiathis.com/?webid=t163&amp;url=http://www.iic.cn{:U('Article/detail/',array('id'=>$info['id']))}&amp;title={:urlencode($info['title'])}&amp;uid=1523327" target="_blank"> <span class="icon-t163" data-toggle="tooltip" data-placement="top" data-original-title="分享到网易微博"></span> </a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</block>
<block name="script">
    <script>
$(window).resize(function(){
            wWidth = $(window).width();
            cWidth = $(".content_content").width();
            sWidth = $("#sidebar").outerWidth();
            tWidth = $(".ot_post_text").parent("div").outerWidth();
            $(".ot_share").css({
                marginLeft:wWidth/2+cWidth/2+30
            });
            if(wWidth<500){
                $('.container').css({paddingLeft:0});
                $('.container').css({paddingRight:0});
            }else{
                $('.container').css({paddingLeft:15});
                $('.container').css({paddingRight:15});
            }
});
</script>
</block>

